<template>
	<view>
		<view class="u-p-l-30 u-p-r-30">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
				<u-form-item label="商品分类:" prop="goodsInfo.rubbishTypeId" borderBottom @click="showGoodsType = true;"
					ref="item1" labelWidth="auto">
					<u--input v-model="form.goodsInfo.rubbishTypeName" disabled disabledColor="#ffffff"
						placeholder="请选择商品分类" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="商品名称:" prop="goodsInfo.title" borderBottom labelWidth="auto">
					<u--input v-model="form.goodsInfo.title" border="none"></u--input>
				</u-form-item>
				<u-form-item label="商品简介:" prop="goodsInfo.fuTitle" borderBottom labelWidth="auto">
					<u--input v-model="form.goodsInfo.fuTitle" border="none"></u--input>
				</u-form-item>
				<u-form-item label="商品品牌:" prop="goodsInfo.brand" borderBottom labelWidth="auto">
					<u--input v-model="form.goodsInfo.brand" border="none"></u--input>
				</u-form-item>
				<u-form-item label="已售数量:" prop="goodsInfo.outCount" borderBottom labelWidth="auto">
					<u--input v-model="form.goodsInfo.outCount" border="none"></u--input>
				</u-form-item>
				<u-form-item label="是否上架:" borderBottom labelWidth="auto">
					<u-radio-group v-model="form.goodsInfo.status" placement="row" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '6px',marginLeft: '20px'}" v-for="(item, index) in radioStatusList"
							:key="index" :label="item.name" :name="item.value" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="商品主图:" borderBottom labelWidth="180rpx">
					<u-upload :fileList="fileListIndexImg" @afterRead="afterRead" @delete="deletePic()" name="IndexImg"
						multiple :maxCount="6" :previewFullImage="true"></u-upload>
				</u-form-item>
				<u-form-item label="商品详情图:" borderBottom labelWidth="180rpx">
					<u-upload :fileList="fileListDetailsInfo" @afterRead="afterRead" @delete="deletePic()"
						name="DetailsInfo" multiple :maxCount="6" :previewFullImage="true"></u-upload>
				</u-form-item>
				<u-form-item label="规格:" prop="goodsInfo.unit" borderBottom labelWidth="auto">
					<u--input v-model="form.goodsInfo.unit" border="none"></u--input>
				</u-form-item>
				<u-form-item label="原价:" prop="goodsInfo.price" borderBottom labelWidth="auto">
					<u--input v-model="form.goodsInfo.price" border="none"></u--input>
				</u-form-item>
				<u-form-item label="优惠价:" prop="goodsInfo.salePrice" borderBottom labelWidth="auto">
					<u--input v-model="form.goodsInfo.salePrice" border="none"></u--input>
				</u-form-item>
				<u-form-item label="库存:" prop="goodsInfo.stock" borderBottom labelWidth="auto">
					<u--input v-model="form.goodsInfo.stock" border="none"></u--input>
				</u-form-item>
				
				<view class="u-p-t-80 u-p-b-40">
					<u-button type="primary" color="#FF5B00" text="保存商品" @click="submit()"></u-button>
				</view>
				
			</u--form>
		</view>
		<u-action-sheet :show="showGoodsType" :actions="typelist" title="请选择商品分类" @close="showGoodsType = false"
			@select="handleSelectClickType">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		getRubbishType,
		getProductInfoList,
		getEquInfoList,
		goodsAdd,
		getProductInfoDetails
	} from '@/common/api/api.js'
	import config from '@/common/config'

	export default {
		data() {
			return {
				busType: 1,
				companyId: '',
				type: 1,
				showGoodsType: false,
				radioStatusList: [{
						name: '上架',
						value: "0"
					},
					{
						name: '下架',
						value: "1"
					}

				],
				// 主图
				fileListIndexImg: [],
				// 详情图
				fileListDetailsInfo: [],
				// 表单验证
				rules: {
					'goodsInfo.typeId': {
						type: 'string',
						required: true,
						message: '请选择分类',
						trigger: ['blur', 'change']
					},
					'goodsInfo.title': {
						type: 'string',
						required: true,
						message: '请输入商品名称',
						trigger: ['blur', 'change']
					},
					'goodsInfo.unit': {
						type: 'string',
						required: true,
						message: '请输入规格',
						trigger: ['blur', 'change']
					},
					'goodsInfo.price': {
						type: 'number',
						required: true,
						message: '请输入原价',
						trigger: ['blur', 'change']
					},
					'goodsInfo.salePrice': {
						type: 'number',
						required: true,
						message: '请输入优惠价',
						trigger: ['blur', 'change']
					},
				},
				// 表单
				form: {
					goodsInfo: {
						status: '0',
						productSkuList: [],
						sort: 0,
						showIndex: 1,
						type: 1,
						price:'',
						salePrice:'',
						unit:''
					}
				},
				// 商品类型
				typelist: [],
				goodsId: '',
				skuId:'',
			}
		},
		onShow: function(options) {
			this.companyId = this.$store.state.$userInfo.companyId;

			this.handleGetGoodTypelist()

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(options) {
			if (options.id) {
				this.goodsId = options.id;
				// 读取数据
				this.handleGetProductInfoDetails();
			}
		},
		methods: {
			// 获取产品信息
			handleGetProductInfoDetails() {
				getProductInfoDetails({
					id: this.goodsId
				}).then(res => {
					this.form.goodsInfo = res.data;
					this.form.goodsInfo.produnctInfoSkuList = this.form.goodsInfo.productSkuList;
					let skuList = this.form.goodsInfo.productSkuList[0];
					this.form.goodsInfo.unit = skuList.unit;
					this.form.goodsInfo.stock = skuList.stock;
					this.form.goodsInfo.price = skuList.price;
					this.form.goodsInfo.salePrice = skuList.salePrice;
					this.skuId=skuList.id;
					this.fileListIndexImg = JSON.parse(this.form.goodsInfo.indexImg).map(item => {
						return {
							url: item
						};
					});
					this.fileListDetailsInfo = JSON.parse(this.form.goodsInfo.detailsInfo).map(item => {
						return {
							url: item
						};
					});
				})
			},
			// 提交
			submit() {
				this.$refs.uForm.validate().then(res => {
					if (this.fileListIndexImg.length == 0) {
						uni.$u.toast("请上传商品主图片")
						return;
					}
					if (this.fileListDetailsInfo.length == 0) {
						uni.$u.toast("请上传商品详情图片")
						return;
					}
					this.form.goodsInfo.productSkuList.push({
						skuImg: this.fileListIndexImg[0].url,
						stock: this.form.goodsInfo.stock,
						price: this.form.goodsInfo.price,
						salePrice: this.form.goodsInfo.salePrice,
						unit: this.form.goodsInfo.unit,
						upc: "001",
						id:this.skuId
					});
					let indexImg = this.fileListIndexImg.map(item => {
						return item.url;
					})
					let detailsImg = this.fileListDetailsInfo.map(item => {
						return item.url;
					})
					this.form.goodsInfo.indexImg = JSON.stringify(indexImg);
					this.form.goodsInfo.detailsInfo = JSON.stringify(detailsImg);
					this.form.goodsInfo.companyId = this.companyId;
					console.log(this.form.goodsInfo);
					goodsAdd(this.form.goodsInfo).then(res => {
						if (res.code == 200) {
							uni.$u.toast("添加商品成功");
							uni.navigateBack({
								delta: 1,
								success: () => {
									uni.$emit('goodsBack')
								}
							})
						}
					})
				}).catch(errors => {
					uni.$u.toast("请填写完整的商品信息")
				})
			},
			// 如果是商城获取商家列表
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			// 选择分类
			handleSelectClickType(item) {
				console.log(item)
				this.form.goodsInfo.rubbishTypeId = item.id;
				this.form.goodsInfo.rubbishTypeName = item.name;
			},
			// 获取商品分类列表
			handleGetGoodTypelist() {
				let that = this;
				getRubbishType({
					level: 1,
					id: '',
					busType: '1'

				}).then(res => {
					that.typelist = res.data;
					console.log("typelist", that.typelist)
					that.typelist = that.typelist.map(item => {
						return {
							...item,
							name: item.deptName

						}

					})
					console.log("res.data", res.data)
					console.log("typelist", that.typelist)
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增主图图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log("result", JSON.parse(result).data)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: JSON.parse(result).data.url
					}))
					fileListLen++
				}
				console.log("fileList", this[`fileList${event.name}`])
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.baseUrl + "/api/userInfo/userUpload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						}
					});
				})
			},
		},


	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss">

</style>